<script setup>

import {Avatar, Edit, Message, Promotion, Switch, Upload} from "@element-plus/icons-vue";

function person() {
  console.log("个人信息")
}
function setting() {
  console.log("设置")
}
function exit() {
  console.log("退出登录")
}
// 暗黑模式
import { useDark, useToggle } from '@vueuse/core';

// useDark()可以获取当前的主题模式是不是暗黑模式，返回的是布尔值
const isDark = useDark();

// useToggle()类似于开关，能将useDark()取反，实现主题模式切换效果
const toggleDark = useToggle(isDark);

// # 弹出框
import { ref, unref } from 'vue'
import {ClickOutside as vClickOutside, ElMessage} from 'element-plus'

const popoverRef = ref()
const onClickOutside = () => {
  unref(popoverRef).popperRef?.delayHide?.()
}

// #文本
const textarea = ref('')
import {watch} from "vue";
//上传
import { UploadFilled } from '@element-plus/icons-vue'
// 设置在提交信息
let yesload = ref(false)
watch(textarea, (newValue) => {
  yesload.value = newValue.trim() !== '';
});


//页面切换
let page = ref(0)
function updatePage() {
  page.value += 1
  if (page.value === 2){
    page.value = 0
  }

}
const stringA = ref('');
const stringB = ref('');
// 实现Vue前端文字效果：如何让一段文本像是手动一个一个字打出来的 https://blog.csdn.net/weixin_43997331/article/details/135376110
function print() {
  console.log(stringA.value.length, stringB.value.length);
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }
}

let btn1 = ref(false)
let btn2 = ref(false)
let btn3 = ref(false)
let btn4 = ref(false)
let btn5 = ref(false)
let btn6 = ref(false)

function funcbtn1(){btn1.value = !btn1.value;
  if (page.value===0){
    stringB.value = '其设计目的是用来简化新Spring应用的初始搭建以及开发过程。该框架使用了特定的方式来进行配置，从而使开发人员不再需要定义样板化的配置。传统的spring项目中需要用到大量的xml配置，以及复杂的bean依赖关系，随着spring3.0的发布spring团队开始大量使用约定大于配置的思想来简化配置。Spring Boot就是这样一种开发框架，Spring Boot并不能直接完成Spring的工作。准确的说Spring Boot只是一个整合Spring各项功能的中间件，用于快速的开发Spring应用，同时针对于常用的第三方库也提供了默认的配置，几乎可以实现0配置开发的目的。Spring Boot的设计是可以尽可能快地启动和运行，只需要最少的Spring配置。Spring Boot对构建生产就绪应用程序具有独特的方式。从官方的介绍可以看出Spring Boot的核心思想是“约定优先于配置（Convention Over Configuration）”，其本质其实还是基于Spring来实现的。对于了解Spring的人或者使用过Spring的人来说，Spring烦琐的配置让很多程序员眼花缭乱（各种XML、Annotation配置等），甚至很多时候发生错误也很难快速定位错误的地方。而在Spring Boot框架中，为我们提供了默认的配置，从而使开发人员不再需要定义样板化的配置，通过这种方式，Spring Boot致力于在蓬勃发展的快速应用开发领域（Rapid Application Development）成为领导者。'
  }else {
    stringB.value = '设置高DPI支持意味着你的应用程序能够在高分辨率屏幕上正确显示，而不会出现字体或图像过小的问题。现代显示器的分辨率越来越高（例如 4K 显示器），这导致同样的图像或字体在高分辨率屏幕上显示时可能显得很小。通过启用高DPI支持，应用程序能够自动调整其界面元素的缩放比例，以便在高分辨率屏幕上也能清晰且易于阅读和操作。假设你有一个应用程序，它在普通的 1080p 显示器上看起来很正常，但是在 4K 显示器上运行时，所有的界面元素都变得非常小。通过启用高DPI支持，应用程序会自动调整这些元素的大小，使它们在 4K 显示器上也能保持适当的尺寸和清晰度。'

  }
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }
}
function funcbtn2() {
  btn2.value = !btn2.value;
  if (page.value===0){
    stringB.value = '在传统Java Web项目中，当项目开发完成之后，还需要配置所需的Web容器（诸如Tomcat或者WebLogic之类的Web容器）。但是在Spring\n' +
        '    Boot搭建的项目中，内部提供了几种Web容器，如Tomcat、Jetty和Undertow。Spring Boot提供了一个强大的starter依赖机制，实质上Spring团队将Spring Boot框架整合了一切常用的maven依赖，使Spring\n' +
        '    Boot想要整合对应依赖，就要将需要的依赖全部引入。比如，需要在项目中使用Web，也就是我们常说的Spring\n' +
        '    MVC，如果是原有的maven项目，就需要引入很多依赖才能完成这个简单的需求。但是在Spring\n' +
        '    Boot项目中，我们只需要在maven依赖中加入spring-boot-starter-web依赖即可。比如项目中需要使用MySQL数据库，这里只需要加入MySQL依赖，并且在配置文件中配置数据库信息就可以正常使用。在生产环境中，应用的各项指标监控更是必不可少。在Spring\n' +
        '    Boot应用中提供了一个spring-boot-starter-actuator（以下简称Spring\n' +
        '    Boot-Actuator）来供我们查看应用的各项指标，如health（健康检查）、dump（活动线程）、env（环境属性）、metrics（内存，CPU等）等指标，以监控我们的应用，同时可以配合使用spring-boot-admin-starter-server（以下简称Spring\n' +
        '    Boot-Admin）监控我们的项目。'
  }else {
    stringB.value = '加载与实例化（Loading and Instantiation）：\n' +
        '\n' +
        '当容器启动或者收到第一个请求时，会加载 Servlet 类。\n' +
        '接着，容器会创建 Servlet 实例。这通常发生在第一个请求到达时，但也可能在容器启动时预先创建。\n' +
        '初始化（Initialization）：\n' +
        '\n' +
        '在实例化之后，容器会调用 Servlet 的 init() 方法来初始化 Servlet。\n' +
        'init() 方法只会在 Servlet 实例创建时调用一次，通常用于执行一些初始化操作，如读取配置文件、建立数据库连接等。\n' +
        '请求处理（Request Handling）：\n' +
        '\n' +
        '一旦 Servlet 初始化完成，容器就可以开始处理客户端的请求了。\n' +
        '对于每个请求，容器会调用 Servlet 的 service() 方法，并将请求和响应对象作为参数传递给该方法。\n' +
        '在 service() 方法内部，Servlet 根据请求的类型（GET、POST 等）执行相应的逻辑，并生成响应返回给客户端。\n' +
        '销毁（Destruction）：\n' +
        '\n' +
        '当容器决定要销毁 Servlet 实例时（可能是因为应用被卸载、容器关闭或者 Servlet 的 destroy() 方法被显式调用），容器会调用 Servlet 的 destroy() 方法。\n' +
        '在 destroy() 方法中，Servlet 可以执行一些清理工作，如关闭数据库连接、释放资源等。\n' +
        '卸载（Unloading）：\n' +
        '\n' +
        '当容器关闭或者 Servlet 所在的应用被卸载时，Servlet 实例会被销毁，其对应的类也会被卸载。\n' +
        '需要注意的是，Servlet 容器（如 Tomcat、Jetty 等）负责管理 Servlet 的生命周期，开发人员只需要实现 Servlet 接口并提供相应的逻辑即可。在 Servlet 生命周期的各个阶段，容器会调用 Servlet 的不同方法来实现相应的功能，开发人员可以通过重写这些方法来实现自定义的逻辑。\n' +
        '\n' +
        '\n' +
        '\n' +
        '\n' +
        '\n' +
        '\n'
  }
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }
}

function funcbtn3() {
  btn3.value = !btn3.value;
  if (page.value === 0) {
    stringB.value = '依赖简化：Spring\n' +
        '    Boot自有的starter中提供了一些可以快捷使用的依赖，让整合或集成一些常用的功能更便捷。配置简化：在配置方法中，如果没有特殊情况，Spring\n' +
        '    Boot为我们提供了一些默认的配置，比如端口号默认为8080等。部署简化：正如前面介绍的可执行JAR部署，与传统服务的Web模式部署（打WAR包部署）相比，连安装Web容器的时间都节省了，不只是开发者，对运维人员也是福音。'
  }else
  {
    stringB.value = 'QT程序界面的 一个个窗口、控件，就是像上面那样用相应的代码创建出来的。\n' +
        '\n' +
        '但是，把你的脑海里的界面，用代码直接写出来，是有些困难的。\n' +
        '\n' +
        '很多时候，运行时呈现的样子，不是我们要的。我们经常还要修改代码调整界面上控件的位置，再运行预览。反复多次这样操作。\n' +
        '\n' +
        '可是这样，真的...太麻烦了。\n' +
        '\n' +
        '其实，我们可以用QT界面生成器 Qt Designer ，拖拖拽拽就可以直观的创建出程序大体的界面。\n' +
        '\n' +
        '怎么运行这个工具呢？\n' +
        '\n' +
        'Windows下，运行 Python安装目录下 Scripts\\pyside6-designer.exe 这个可执行文件\n' +
        '\n' +
        '\n' +
        '\n' +
        '如果你安装的是pyqt5， 运行 Python安装目录下 Scripts\\pyqt5designer.exe 这个可执行文件'
  }
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }
}

function funcbtn4() {
  btn4.value = !btn4.value;
  if (page.value === 0) {
    stringB.value = '可以用循环数据实现,这种方法更适合页面样式简单，数据少的情况。因为页面已经事先绘制好了，不想在vue模板上增加循环，那么只能在css搞点动作了实现思路：先给要加动画的dom加上class名，在js中通过class获取到到dom,循环在dom添加style动画animationDelay 加上延迟几秒的值。比如第一行要延迟一秒显示，在第一行显示出来第二行再显示，也就是第二行延迟2s显示'
  }else
  {
    stringB.value = '可以看出，这种界面的开发， 主要就是开发各种 图形item ： QGraphicsItem。\n' +
        '\n' +
        '有些 QGraphicsItem 需要自己开发 ， 有些可以直接使用 Qt 提供的现成的 QGraphicsItem。\n' +
        '\n' +
        '我们先来看 Qt 提供的一些 图形item ， 他们都是 QGraphicsItem 的子类'
  }
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }
}

function funcbtn5() {
  btn5.value = !btn5.value;
  if (page.value===0){
    stringB.value = 'Vue是一个流行的JavaScript框架，用于构建现代化的Web应用程序。在Vue应用程序中，我们经常需要以HTML形式显示内容，并动态生成HTML代码。本文将介绍如何在Vue中实现这些功能。Vue中的模板语法默认会将所有内容都解析为纯文本，无法直接渲染HTML代码。但是，Vue提供了一个内置指令v-html，可以将包含HTML代码的字符串渲染为HTML元素。在上面的代码中，我们使用了v-html指令来渲染一个包含<h1>Hello, World!</h1>的字符串。在浏览器中，这个字符串将被解析为一个h1标签，并显示为Hello, World!。需要注意的是，使用v-html指令时要非常小心，因为它可以执行任意的JavaScript代码，有潜在的安全风险。只有在您信任并且完全控制所渲染的HTML代码时才应该使用v-html。在Vue中，我们可以使用模板字符串来动态生成HTML代码。模板字符串是一种特殊的字符串，可以插入变量，并支持多行文本。在上面的代码中，我们使用了模板字符串来生成一个包含<h1>Hello, World!</h1>的字符串，并根据this.color变量设置h1元素的颜色。\n' +
        '\n' +
        '需要注意的是，模板字符串中的变量需要使用${}语法进行插值，而不是Vue模板语法中的{{}}。同时，需要使用反引号(`)包裹模板字符串，而不是双引号或单引号。'
  }else {
    stringB.value = '大模型的原理是基于深度学习，它利用大量的数据和计算资源来训练具有大量参数的神经网络模型。通过不断地调整模型参数，使得模型能够在各种任务中取得最佳表现。通常说的大模型的“大”的特点体现在：参数数量庞大、训练数据量大、计算资源需求高等。很多先进的模型由于拥有很“大”的特点，使得模型参数越来越多，泛化性能越来越好，在各种专门的领域输出结果也越来越准确。现在市面上比较流行的任务有AI生成语言（ChatGPT类产品）、AI生成图片（Midjourney类产品）等，都是围绕生成这个概念来展开应用。“生成”简单来说就是根据给定内容，预测和输出接下来对应内容的能力。比如最直观的例子就是成语接龙，可以把大语言模型想象成成语接龙功能的智能版本，也就是根据最后一个字输出接下来一段文章或者一个句子。当前流行的大模型的网络架构其实并没有很多新的技术，还是一直沿用当前NLP领域最热门最有效的架构——Transformer结构。相比于传统的循环神经网络（RNN）和长短时记忆网络（LSTM），Transformer具有独特的注意力机制（Attention），这相当于给模型加强理解力，对更重要的词能给予更多关注，同时该机制具有更好的并行性和扩展性，能够处理更长的序列，立马成为NLP领域具有奠基性能力的模型，在各类文本相关的序列任务中取得不错的效果。'
  }
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归
    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }}
function funcbtn6(){btn6.value = !btn6.value;
  if (page.value===0){
    stringB.value = '大模型的原理是基于深度学习，它利用大量的数据和计算资源来训练具有大量参数的神经网络模型。通过不断地调整模型参数，使得模型能够在各种任务中取得最佳表现。通常说的大模型的“大”的特点体现在：参数数量庞大、训练数据量大、计算资源需求高等。很多先进的模型由于拥有很“大”的特点，使得模型参数越来越多，泛化性能越来越好，在各种专门的领域输出结果也越来越准确。现在市面上比较流行的任务有AI生成语言（ChatGPT类产品）、AI生成图片（Midjourney类产品）等，都是围绕生成这个概念来展开应用。“生成”简单来说就是根据给定内容，预测和输出接下来对应内容的能力。比如最直观的例子就是成语接龙，可以把大语言模型想象成成语接龙功能的智能版本，也就是根据最后一个字输出接下来一段文章或者一个句子。当前流行的大模型的网络架构其实并没有很多新的技术，还是一直沿用当前NLP领域最热门最有效的架构——Transformer结构。相比于传统的循环神经网络（RNN）和长短时记忆网络（LSTM），Transformer具有独特的注意力机制（Attention），这相当于给模型加强理解力，对更重要的词能给予更多关注，同时该机制具有更好的并行性和扩展性，能够处理更长的序列，立马成为NLP领域具有奠基性能力的模型，在各类文本相关的序列任务中取得不错的效果。'
  }else {
    stringB.value = '大模型的原理是基于深度学习，它利用大量的数据和计算资源来训练具有大量参数的神经网络模型。通过不断地调整模型参数，使得模型能够在各种任务中取得最佳表现。通常说的大模型的“大”的特点体现在：参数数量庞大、训练数据量大、计算资源需求高等。很多先进的模型由于拥有很“大”的特点，使得模型参数越来越多，泛化性能越来越好，在各种专门的领域输出结果也越来越准确。现在市面上比较流行的任务有AI生成语言（ChatGPT类产品）、AI生成图片（Midjourney类产品）等，都是围绕生成这个概念来展开应用。“生成”简单来说就是根据给定内容，预测和输出接下来对应内容的能力。比如最直观的例子就是成语接龙，可以把大语言模型想象成成语接龙功能的智能版本，也就是根据最后一个字输出接下来一段文章或者一个句子。当前流行的大模型的网络架构其实并没有很多新的技术，还是一直沿用当前NLP领域最热门最有效的架构——Transformer结构。相比于传统的循环神经网络（RNN）和长短时记忆网络（LSTM），Transformer具有独特的注意力机制（Attention），这相当于给模型加强理解力，对更重要的词能给予更多关注，同时该机制具有更好的并行性和扩展性，能够处理更长的序列，立马成为NLP领域具有奠基性能力的模型，在各类文本相关的序列任务中取得不错的效果。'

  }
  if (stringA.value.length >= stringB.value.length) {
    // 退出递归

    return;
  } else {
    // stringA仍然比stringB短，进入下一次等待和递归
    setTimeout(() => {
      stringA.value += stringB.value.charAt(stringA.value.length);
      print(stringA, stringB);
    }, 50);
  }}
function sumbit() {
  ElMessage.error('错误, 未登录状态.')
}
const isLogin = ref(false)
function login() {
  isLogin.value=true
}
</script>

<template>

<!--  <p class="text">{{ stringA }}</p>-->
<!--  <button @click="print"><p class="text">点击开启动态效果</p></button>-->

  <!--  <button id="showPopup" onclick="showPopup()">弹出</button>-->
  <div class="common-layout">
    <el-container>
      <el-header class="header">
        <el-row class="header-1">
          <el-col :span="12" >
            <a href="/"><img class="img" src="../img/root-removebg-preview.png" alt=""></a>
          </el-col>
          <div class="flex-grow" />
          <a href="/login"><el-button class="header-button" type="primary" @click="login">
            <el-icon size="20"><Avatar /></el-icon>
            <span >立即登录</span>
          </el-button></a>
        </el-row>

      </el-header>
      <!--      # 设置横行-->
<!--      <el-divider border-style="double" class="divider"/>-->

      <div class="body">
          <div class="main1" >

            <img src="@/img/root-removebg-preview.png" class="img image">

            <div style="padding: 10px;background-color: rgb(254,254,253);width: 1000px; height: 600px;border-radius: 20px">
              <div style="padding: 20px">
                <h1 style="font-family: 微软雅黑; font-size: 30px;">你好,
              <br>
              我是叽里咕噜
             </h1>
                <br>
               <p style="font-family: 华文仿宋; font-size: 15px;">
                作为你的智能伙伴，我既能写文案、想点子，又能你陪你聊天、答疑解惑。
              </p>
              <br>
              <p style="font-family: 华文仿宋; font-size: 15px;">你可以试着问我：</p>
              </div>
              <el-button style="background-color: rgb(254,254,253); border: none;" @click="updatePage" ><el-icon style="color: #409EFF" size="20px"><Switch /></el-icon><span style="color: #409EFF;  font-size: 15px">换一换</span></el-button>
              <div style="padding: 20px" v-if="page===0&&btn1===false&&btn2===false&&btn3===false&&btn4===false&&btn5===false&&btn6===false">
                <div>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn1">
                    <span><h2>什么是springBoot？</h2><br>
                      Spring Boot是由Pivotal团队提供的全新框架...
                    </span>
                  </el-button>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn2"><span><h2>Spring Boot 特点</h2><br>
                      Spring Boot具有多种快速构建项目的方式...
                    </span></el-button>
                </div>
                <br>
                <div>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn3"><span><h2>Spring Boot 的优点</h2><br>
                      Spring Boot最大的优点是在一定程度上简化...
                    </span></el-button>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn4"><span><h2>SVue前端文字效果</h2><br>
                      如何让一段文本像是手动一个一个字打出来的...
                    </span></el-button>
                </div>
                <br>
                <div>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none; " @click="funcbtn5"><span><h2>Vue中动态生成HTML代码</h2><br>
                      Vue中如何以HTML形式显示内容并动态...
                    </span></el-button>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn6"><span><h2>大模型扫盲系列</h2><br>
                      大模型扫盲系列——初识大模型...
                    </span></el-button>
                </div>
              </div>
              <div style="padding: 20px" v-if="page===1&&btn1===false&&btn2===false&&btn3===false&&btn4===false&&btn5===false&&btn6===false">
                <div>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn1">
                    <span><h2>设置高DPI支持什么意思</h2><br>
                      设置高DPI支持意味着你的应用程序能够在高分辨率...
                    </span>
                  </el-button>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn2"><span><h2>Servlet 的生命周期</h2><br>
                      Servlet 的生命周期描述了一个 Servlet 实例从创建...
                    </span></el-button>
                </div>
                <br>
                <div>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn3"><span><h2>界面设计和布局</h2><br>
                      QT程序界面的 一个个窗口、控件...
                    </span></el-button>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn4"><span><h2>工控系统前端</h2><br>
                      程序开发的需要使用 Qt 的 Graphics View...
                    </span></el-button>
                </div>
                <br>
                <div>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none; " @click="funcbtn5"><span><h2>SVue前端文字效果</h2><br>
                      如何让一段文本像是手动一个一个字打出来的...
                    </span></el-button>
                  <el-button style="width: 460px; height: 100px;background-color: rgb(246,248,253);border: none;" @click="funcbtn6"><span><h2>SVue前端文字效果</h2><br>
                      如何让一段文本像是手动一个一个字打出来的...
                    </span></el-button>
                </div>
              </div>

              <div style="padding: 20px" v-if="page===0&&btn1===true">
                <p class="text">{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===0&&btn2===true">
                <p class="text">{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===0&&btn3===true">
                <p class="text">{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===0&&btn4===true" >
              <p class="text" >{{stringA}}</p>
            </div>
              <div style="padding: 20px" v-if="page===0&&btn5===true" >
                <p class="text" >{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===0&&btn6===true" >
                <p class="text" >{{stringA}}</p>
              </div>

              <div style="padding: 20px" v-if="page===1&&btn1===true">
                <p class="text">{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===1&&btn2===true">
                <p class="text">{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===1&&btn3===true">
                <p class="text">{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===1&&btn4===true" >
                <p class="text" >{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===1&&btn5===true" >
                <p class="text" >{{stringA}}</p>
              </div>
              <div style="padding: 20px" v-if="page===1&&btn6===true" >
                <p class="text" >{{stringA}}</p>
              </div>

            </div>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>

            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
            <br>
<!--            <div><el-input-->
<!--                v-model="input1"-->
<!--                style="width: 850px;height: 40px"-->
<!--                size="large"-->
<!--                placeholder="Please Input"/>-->
<!--              <el-button type="primary" plain style="height: 40px; width: 100px" @click="sumbit">提交</el-button>-->
<!--            </div>-->

            <div class="inputBox">
<!--              提问栏-->
<!--              <input type="text" placeholder="请输入信息" name="email">-->
              <br>
              <a href="/login" style="font-size: 23px;margin-top: 15px; margin-left: 20px; color:rgb(83, 82, 240); font-family: 宋体">登录</a><span style="font-size: 16px;font-family: 宋体">后，可以向我发送问题</span>
                <el-button type="primary" circle size="large" style="position: absolute;right: 0;bottom: 0; margin: 20px" ><el-icon size="20" @click="sumbit"><Promotion /></el-icon></el-button>
            </div>
            <br>
            <p style="font-family: 仿宋; font-size: 14px">内容由AI生成，无法确保真实准确，仅供参考，请遵守《叽里咕噜用户协议》、《叽里咕噜个人信息保护规则》，基于叽里咕噜大模型，版本：V3.1.0</p>
          </div>

        </div>
<!--      当登录为true的时候跳转-->

      <div class="foot">
        <div class="foot-main" style="padding: 20px">
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <br>
          <div style="margin: 20px 0" />


        </div>
      </div>
<!--      </el-main>-->
    </el-container>
  </div>

</template>


<style scoped>
.inputBox {
  position: relative;
  width: 1000px;
  height: 150px;
  background-color: white;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
  inset -2px -5px 10px rgba(255, 255, 255, 1),
  15px 15px 10px rgba(0, 0, 0, 0.05),
  15px 10px 15px rgba(0, 0, 0, 0.025);
  border-radius: 25px;

  input {
    border: none;
    outline: none;
    background: transparent;
    width: 100%;
    font-size: 1em;
    padding: 10px 15px;
  }

  input[type="submit"] {
    color: #fff;
    font-size: 1em;
    cursor: pointer;
    letter-spacing: 0.1em;
    font-weight: 500;
  }
}

.inputBox:last-child {
  width: 120px;
  background: #ff0f5b;
  box-shadow: inset 2px 5px 10px rgba(0, 0, 0, 0.1),
  15px 15px 10px rgba(0, 0, 0, 0.05),
  15px 10px 15px rgba(0, 0, 0, 0.025);
  transition: 0.5s;
}

.inputBox:last-child:hover {
  width: 150px;
}

.inputBox:before {
  content: '';
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 65%;
  height: 5px;
  background: rgba(255, 255, 255, 0.5);
  border-radius: 5px;
}


.text {
  font-size: 16px;
  font-family: 黑体;
  line-height: 1.5;
  text-indent: 2em;
}
.image {
  margin-right: 10px; /* 图片和文本之间的间距 */
}
.foot-main {
  background-color: rgb(240, 241, 246);
  height: 35.8vh;
  text-align: center;
}
*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

.body {
  width: 100%;
  height: 60vh;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat", sans-serif;
  font-size: 12px;
  background-color: rgb(240, 241, 246);
  /*color: #a0a5a8;*/


}

.main1 {
  position: relative;
  width: 1000px;
  min-width: 1000px;
  min-height: 600px;
  height: 600px;
  padding: 25px;
  background-color: rgb(240, 241, 246);
  border-radius: 4px;

}


.toolbar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  right: 20px;
  height: 35px;
  width: 50px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.li {
  text-indent: 20px;
  font-size: 12px;
  font-family: 华文仿宋;
}

a {
  text-decoration: none;
  font-family: 黑体;
  font-size: 15px;
}
h2 {
  font-size: 20px;
  font-family: "微软雅黑";
}

.header-1 {
  padding: 15px;
}
.header {
  height: 55px;
}
h1 {
  font-size: 35px;
  font-family:华文仿宋;
}

.header-button {

  height: 35px;
  width: 100px;
  text-align: center;
  border: 0; /* 设置边框为0，这样就没有边框了 */
}
.img {
  height: 35px;
  width: auto;
}
.flex-grow {
  flex-grow: 1;
}



</style>
